<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link href="www.aspxbyg.com/QQ.jpg" rel="icon" type="image/x-ico">
    <title>AIQQ</title>
    <style>
        *{
            margin: 0;
            padding: 0; 
        }
        body{
            background-color: rgb(25, 27, 54);
        }
        .bj{
            margin: 50px auto;
            position: relative;
            width: 360px;
            height: 400px;

        }
        .ss{
            position: relative;
            float: left;
            width: 30px;
            height: 30px;
            border-radius: 15px;
            margin-right: 5px;
            margin-left: 5px;
            top:50%;
            transform: translateY(-50%);    
        }
        .wz{
            margin: 200 auto;
            color:#bf6ec7;
            font-size: 19px;
        }
        .ss:nth-of-type(1){
            background-color: red;
            height: 70px;
            animation: myy1 1s  3s infinite  alternate;
            -webkit-animation: myy1 1s 3s infinite alternate; 

        }
        .ss:nth-of-type(2){
            background-color: rgb(255, 81, 0);
            height: 130px;
            
        }
        .ss:nth-of-type(3){
            background-color: rgb(251, 255, 0);
            height: 160px;
            margin-top:10px;
           
        }
        .ss:nth-of-type(4){
            background-color: rgb(136, 255, 0);
            height: 190px;
            margin-top:40px;
            
        }
        .ss:nth-of-type(5){
            background-color: rgb(0, 255, 64);
            height: 190px;
            margin-top:64px;
           
        } 
         .ss:nth-of-type(6){
            background-color: rgb(0, 255, 179);
            height: 190px;
            margin-top:40px;
            
        }
        .ss:nth-of-type(7){
            background-color: rgb(0, 162, 255);
            height: 160px;
            margin-top:10px;
           
        }
        .ss:nth-of-type(8){
            background-color: rgb(55, 0, 255);
            height: 130px;
          
        }
        .ss:nth-of-type(9){
            background-color: rgb(234, 0, 255);
            height: 70px;
        }
    </style>
</head>
<body>
   
  
        
    <div class="bj">
    
        <div class="f1 ss"></div>
        <div class="f2 ss"></div>
        <div class="f3 ss"></div>
        <div class="f4 ss"></div>
        <div class="f5 ss"></div>
        <div class="f6 ss"></div>
        <div class="f7 ss"></div>
        <div class="f8 ss"></div>
        <div class="f9 ss"></div>

    </div>
    <br>
    <center class="wz">Death is a mysterious topic</center>
    <script>
      var list1=[
                    [
                        '70px',
                        '0'
                    ],

                    [
                        '130px',
                        '0'
                    ],
                    [
                        '160px',
                        '10px'
                    ],
                    [
                        '190px',
                        '40px'
                    ],
                    [
                        '190px',
                        '64px'
                    ],
                    [
                        '190px',
                        '40px'
                    ],
                    [
                        '160px',
                        '10px'
                    ],

                    [
                        '130px',
                        '0'
                    ],
                    [
                        '70px',
                        '0'
                    ]
               ];
      var iNow=0; // 全局变量
      /*
      缩小函数
      */
      var fun1=function(){
        if(iNow<=8)
          {
            $('.ss:eq('+iNow+')').animate({
               height:'30px',
               marginTop:0
            },1300);
            iNow++;
            setTimeout(fun1,300);
          }
          else if(iNow==9)
          {
            iNow=0;
            setTimeout(fun2,300);
          } 

      }
      /*
      扩张函数
      */
      var fun2=function(){
        if(iNow<=8)
          {
            $('.ss:eq('+iNow+')').animate({
               height:list1[iNow][0],
               marginTop:list1[iNow][1]
            },1300);
            iNow++;
            setTimeout(fun2,300);
          }
          else if(iNow==9)
          {
            iNow=0;
            setTimeout(fun1,300);
          }

      };
      setTimeout(fun1,1000); //运行函数
    </script>
    
</body>
</html>